<template lang="html">
  <section class="component-book_court_select">
	<div class="book_date">
		<ul class="date_list_select">
			<li class="data_list_item">
				<div class="content">
					<div class="courtData_left">
						<timeList :seletedSection="seletedSection" ></timeList>
					</div>
					<div class="courtData_right">
						<div class="header">
							<BookSelectTop :courts="courts"></BookSelectTop>
						</div>
						<div @touchmove="touchMove" class="slide_content">
							<selector :seletedSection="seletedSection" :courts="courts"></selector>
						</div>
					</div>
				</div>

			</li>
		</ul>
    <div class="conten_item_demo">
      <div class="content_item_detail content_item_detail_able">
        可预订
      </div>
      <div class="content_item_detail content_item_detail_disable">
        已出售
      </div>
      <div class="content_item_detail content_item_detail_selected">
        选中的
      </div>
    </div>
	</div>
  </section>
</template>

<script>
import utils from '@/lib/utils'

export default {
  props: {
    seletedDate: {
	  type: Array,
	  requried: true
	  },
	courts: {
	  type: Array,
	  requried: true
	},
  seletedSection: {
	  type: Array,
	  requried: true
	}
  },
  components: {
    timeList: require('@/components/court_book/time_list'),
  	BookSelectTop: require('@/components/court_book/content_top'),
    selector: require('@/components/court_book/selector')
  },
  data(){
  	return {
  		xDistance: 0,
  		yDistance: 0
  	}
  },
  methods:{
  	touchMove: (function(){
  		let bodyEle, headerEle, asideEle
  		return utils.debounce(function(){
  			if(bodyEle === undefined){
  				bodyEle = this.$el.querySelector('.selector_body')
  			}
  			if(headerEle === undefined){
  				headerEle = this.$el.querySelector('.header')
  			}
  			if(asideEle === undefined){
  				asideEle = this.$el.querySelector('.courtData_left')
  			}

	  		let xDistance = bodyEle.scrollLeft,
	  			yDistance = bodyEle.scrollTop,
	  			courtsList = xDistance,
	  			timeList = yDistance
	  		headerEle.scrollLeft = courtsList,
	  		asideEle.scrollTop = timeList
    	}, 400)
    })()
    }
  }
</script>

<style lang="scss" scoped>
	.component-book_court_select{
		height: 70%;
		.book_date{
			background-color: #e2e2e2;
			height: 100%;
			width: 100%;
			border: none;

			.date_list_select{
				height: 100%;
        padding-top:30px;
				.data_list_item{
					height: 100%;
				}
			}
		}
	}
	.content{
		height:100%;
		.courtData_left{
			display: inline-block;
			vertical-align: top;
			margin-top: 70px;
			height: 87%;
			overflow-y: scroll;
		}
		.courtData_right{
			display: inline-block;
			width: 80%;
			height: 100%;
			white-space: nowrap;
			.slide_content{
				overflow: scroll;
				height: 85%;
			}
			.header{
				overflow: scroll;
			    padding-bottom: 15px;
			}
		}
	}
  .conten_item_demo{
    width: 100%;
    text-align: center;
    background-color: #e2e2e2;
    .content_item_detail{
      width: 110px;
      height: 70px;
      text-align: center;
      display: inline-block;
      margin-right: 7px;
      color: #fff;
      line-height: 70px;
    }
    .content_item_detail_disable{
      background-image: linear-gradient(0deg, #5e5e5e 0%, #474a43 100%);
      border-radius: 10px;
    }
    .content_item_detail_able{
      background-image: linear-gradient(0deg, #17c5ae 0%, #2dc294 100%);
      border-radius: 10px;
    }
    .content_item_detail_selected{
      background-image: linear-gradient(0deg, #f67c86 0%, #f6774b 100%);
      border-radius: 10px;
    }
  }
	.component-book_selector{
	width:100%;
	height: 100%;
}

</style>
